<template>
  <div class="order">
    <!-- 订单列表 -->
    <van-sticky>
      <nav-bar style="background: var(--theme-color); color: white" is-back>
        <template #center>订单列表</template>
        <template #right>
          <i class="iconfont icon-gengduo"></i>
        </template>
      </nav-bar>
    </van-sticky>
    <van-tabs
      sticky
      offset-top="44"
      animated
      v-model="active"
      @click="queryOrder"
    >
      <van-tab v-for="tab in tabs" :key="tab" :title="tab">
        <template v-if="orderList.length > 0">
          <template v-for="order in orderList">
            <div :key="order.id" class="order-item">
              <template v-for="(orderDesc, index) in order.orderDesc">
                <van-card
                  :num="orderDesc.num"
                  :price="orderDesc.price"
                  :title="orderDesc.title"
                  :thumb="orderDesc.show.img"
                  :key="index"
                  @click="$router.push('/order-detail/' + order.id)"
                >
                </van-card>
              </template>
              <div class="total">
                {{ order.totalPrice | priceFilter }}
                <div v-if="active == 0">
                  <van-button size="mini" @click="handleCancel(order.id)">
                    取消
                  </van-button>
                  <van-button
                    size="mini"
                    color="red"
                    @click="handlePay(order.id)"
                  >
                    去支付
                  </van-button>
                </div>
                <div v-if="active == 1">
                  <van-button
                    size="mini"
                    color="red"
                    @click="handleDelete(order.id)"
                  >
                    删除
                  </van-button>
                </div>
                <div v-if="active == 2">
                  <van-button
                    size="mini"
                    color="red"
                    @click="handleDelete(order.id)"
                  >
                    删除
                  </van-button>
                </div>
              </div>
            </div>
          </template>
        </template>
        <template v-else>
          <van-empty description="当前状态没有订单" />
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { queryOrder, pay, cancel, delCart } from '@/api'
import NavBar from '@/components/nav-bar/nav-bar.vue'
import { mapState } from 'vuex'
export default {
  components: {
    NavBar
  },
  data: () => ({
    active: 0,
    tabs: ['待支付', '已完成', '取消'],
    orderList: []
  }),
  mounted() {
    this.queryOrder()
  },
  computed: {
    ...mapState({
      uid: (state) => state.userInfo.id
    })
  },
  methods: {
    // 查询订单记录
    async queryOrder() {
      this.orderList = await queryOrder(this.uid, this.active)
    },
    // 支付
    async handlePay(id) {
      await pay({ id })
      this.active = 1
      this.queryOrder()
    },
    // 取消订单
    async handleCancel(id) {
      await cancel({ id })
      this.active = 2
      this.queryOrder()
    },
    // 删除订单
    async handleDelete(id) {
      await delCart(id)
      this.active = 0
      this.queryOrder()
    }
  },
  filters: {
    priceFilter(price) {
      return '￥' + price.toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  min-height: 100vh;
}
.total {
  background: white;
  text-align: right;
  padding: 16px;
}

.van-card {
  background: white;
}
.van-card:not(:first-child) {
  margin-top: 0;
}
.order-item:not(:first-child) {
  margin-top: 8px;
}
</style>
